<template>
	<div id="EggProFeedChart"></div>
</template>

<script setup>
	import { onMounted } from 'vue'
	import { Line } from '@antv/g2plot'
	import ChartApi from "@/api/chart/chartApi";

	const seriesKey = 'series'
	const valueKey = 'value'
	const processData = (data, yFields, meta) => {
		const result = []
		data.forEach((d) => {
			yFields.forEach((yField) => {
				const name = meta?.[yField]?.alias || yField
				result.push({ ...d, [seriesKey]: name, [valueKey]: d[yField] })
			})
		})
		return result
	}
	onMounted(() => {
		ChartApi.eggProFeedData()
			.then(resp =>{
				console.log(resp)
				const formattedData = resp.map((item) => {
					const date = new Date(item.date);
					const formattedDate = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
					return {
						...item,
						date: formattedDate
					};
				});
				draw(formattedData)
			})
	})

	const draw = (data) =>{
		const meta = {
			date: {
				alias: '日期'
			},
			quantity: {
				alias: '产蛋量'
			},
			inputQuantity: {
				alias: '饲料投放量'
			}
		}
		const line = new Line('EggProFeedChart', {
			data: processData(data, ['quantity', 'inputQuantity'], meta),
			padding: 'auto',
			xField: 'date',
			yField: valueKey,
			seriesField: seriesKey,
			appendPadding: [0, 8, 0, 0]
		})

		line.render()
	}


</script>
